<template>
  <view class="bg-gradient-to-r from-gray-50 to-blue-50 min-h-screen w-[750rpx] box-border">
    <!-- Header -->
    <view class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-[40rpx] relative overflow-hidden">
      <view class="absolute w-[300rpx] h-[300rpx] bg-white bg-opacity-10 rounded-full -top-[100rpx] -right-[80rpx]"></view>
      
      <view class="flex items-center mb-[30rpx] relative z-2">
        <view class="w-[120rpx] h-[120rpx] rounded-full border-4 border-white border-opacity-30 overflow-hidden mr-[25rpx] bg-blue-500 flex items-center justify-center text-[50rpx]">
          <IconFont name="user" class="text-white" />
        </view>
        <view class="flex-1">
          <text class="text-[40rpx] font-bold mb-[10rpx] block">张小明</text>
          <text class="text-[26rpx] opacity-90">ID: U20230815001</text>
        </view>
      </view>
      
      <view class="flex justify-between bg-white bg-opacity-15 rounded-[20rpx] p-[25rpx] relative z-2">
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold mb-[5rpx] block">¥1,250.00</text>
          <text class="text-[24rpx] opacity-90">账户余额</text>
        </view>
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold mb-[5rpx] block">普通会员</text>
          <text class="text-[24rpx] opacity-90">当前等级</text>
        </view>
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold mb-[5rpx] block">15%</text>
          <text class="text-[24rpx] opacity-90">平台扣点</text>
        </view>
      </view>
    </view>

    <view class="p-[40rpx]">
      <!-- 实名认证卡片 -->
      <view class="bg-white rounded-[20rpx] p-[35rpx] shadow-lg mb-[35rpx] border border-gray-100">
        <view class="flex items-center mb-[30rpx] pb-[20rpx] border-b-2 border-blue-50">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-[28rpx] mr-[20rpx]">
            <IconFont name="id-card" />
          </view>
          <text class="text-[36rpx] font-semibold text-blue-600">实名认证</text>
        </view>
        
        <view class="flex items-center bg-blue-50 rounded-[15rpx] p-[25rpx] mb-[30rpx]">
          <view class="w-[50rpx] h-[50rpx] bg-blue-600 rounded-full flex items-center justify-center text-white text-[24rpx] mr-[20rpx]">
            <IconFont name="exclamation-circle" />
          </view>
          <view class="flex-1">
            <text class="text-blue-600 font-semibold">您尚未完成实名认证！</text>
            <text class="text-gray-600"> 除浏览外，其他功能需实名认证后方能使用</text>
          </view>
          <nut-button 
            type="primary" 
            size="small"
            class="px-[30rpx] py-[15rpx] text-[26rpx] font-medium"
            @click="handleAuth"
          >
            立即认证
          </nut-button>
        </view>
        
        <view class="bg-blue-50 rounded-[15rpx] p-[30rpx]">
          <text class="text-[28rpx] font-semibold mb-[15rpx] text-blue-600 block">提现限制说明</text>
          <view class="text-[26rpx] leading-[1.8]">
            <view class="mb-[15rpx] pl-[30rpx] relative">
              <text class="text-blue-600 font-bold absolute left-[15rpx]">•</text>
              <text><text class="font-bold">个人用户：</text>每月最高提现额度1.5万元</text>
            </view>
            <view class="mb-[15rpx] pl-[30rpx] relative">
              <text class="text-blue-600 font-bold absolute left-[15rpx]">•</text>
              <text><text class="font-bold">平台商家：</text>每月最高提现额度15万元</text>
            </view>
            <view class="mb-[15rpx] pl-[30rpx] relative">
              <text class="text-blue-600 font-bold absolute left-[15rpx]">•</text>
              <text>提现功能需完成实名认证后方可使用</text>
            </view>
            <view class="mb-[15rpx] pl-[30rpx] relative">
              <text class="text-blue-600 font-bold absolute left-[15rpx]">•</text>
              <text>提现申请将在1-3个工作日内处理</text>
            </view>
          </view>
        </view>
        
        <view class="mt-[30rpx]">
          <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]">
            实名认证费用 <text class="text-red-500">*</text>
          </text>
          <input 
            type="text" 
            value="¥1.00" 
            readonly
            class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50"
          />
          <text class="text-[24rpx] text-gray-600 mt-[10rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
            实名认证需支付1元认证费（用于身份验证系统）。认证完成后，您将获得完整平台功能权限。
          </text>
        </view>
      </view>

      <!-- 交易密码卡片 -->
      <view class="bg-white rounded-[20rpx] p-[35rpx] shadow-lg mb-[35rpx] border border-gray-100">
        <view class="flex items-center mb-[30rpx] pb-[20rpx] border-b-2 border-blue-50">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-[28rpx] mr-[20rpx]">
            <IconFont name="lock" />
          </view>
          <text class="text-[36rpx] font-semibold text-blue-600">交易密码设置</text>
        </view>
        
        <view class="flex gap-[30rpx]">
          <view class="flex-1">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]">
              设置交易密码 <text class="text-red-500">*</text>
            </text>
            <input 
              v-model="formData.tradePassword"
              type="password" 
              placeholder="请输入6位数字密码"
              class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50"
            />
          </view>
          <view class="flex-1">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]">
              确认交易密码 <text class="text-red-500">*</text>
            </text>
            <input 
              v-model="formData.confirmPassword"
              type="password" 
              placeholder="请再次输入密码"
              class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50"
            />
          </view>
        </view>
        
        <text class="text-[24rpx] text-gray-600 mt-[10rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
          交易密码用于账户资金变动时的安全验证，请设置6位数字密码并妥善保管
        </text>
      </view>

      <!-- 会员服务卡片 -->
      <view class="bg-white rounded-[20rpx] p-[35rpx] shadow-lg mb-[35rpx] border border-gray-100">
        <view class="flex items-center mb-[30rpx] pb-[20rpx] border-b-2 border-blue-50">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-[28rpx] mr-[20rpx]">
            <IconFont name="crown" />
          </view>
          <text class="text-[36rpx] font-semibold text-blue-600">会员服务</text>
        </view>
        
        <view class="mb-[30rpx]">
          <text class="text-[28rpx] font-medium text-gray-700">当前会员类型：普通会员</text>
          <text class="text-[24rpx] text-gray-600 mt-[10rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
            普通会员收益扣除平台信息服务费15%，SVIP会员仅扣点5%
          </text>
        </view>
        
        <view class="flex gap-[25rpx]">
          <view class="flex-1 border-2 border-gray-200 rounded-[20rpx] p-[30rpx] text-center">
            <text class="text-[32rpx] font-bold mb-[15rpx] block">普通会员</text>
            <text class="text-[40rpx] font-bold mb-[20rpx] block">¥0 <text class="text-[26rpx] font-normal text-gray-600">/年</text></text>
            <text class="text-[26rpx] text-gray-600 mb-[25rpx] block">免费注册，基础功能</text>
            <text class="text-[28rpx] font-semibold text-blue-600 mb-[20rpx] block">收益扣点 15%</text>
            <view class="text-left text-[24rpx] mb-[30rpx]">
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>免费浏览平台内容</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>可发布任务（需支付信息费）</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>基础客服支持</text>
              </view>
            </view>
            <nut-button 
              type="default" 
              size="large"
              disabled
              class="w-full text-[28rpx] font-semibold"
            >
              当前使用
            </nut-button>
          </view>
          
          <view class="flex-1 border-2 border-blue-600 rounded-[20rpx] p-[30rpx] text-center relative transform -translate-y-[10rpx] shadow-lg">
            <view class="absolute -top-[15rpx] left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-orange-400 to-red-500 text-white px-[25rpx] py-[8rpx] rounded-[20rpx] text-[24rpx] font-semibold">
              推荐
            </view>
            <text class="text-[32rpx] font-bold mb-[15rpx] block">SVIP会员</text>
            <text class="text-[40rpx] font-bold mb-[20rpx] block">¥80 <text class="text-[26rpx] font-normal text-gray-600">/年</text></text>
            <text class="text-[26rpx] text-gray-600 mb-[25rpx] block">高级特权，超低扣点</text>
            <text class="text-[28rpx] font-semibold text-blue-600 mb-[20rpx] block">收益扣点仅 5%</text>
            <view class="text-left text-[24rpx] mb-[30rpx]">
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>所有普通会员功能</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>接任务收益扣点仅5%</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>优先任务推送</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>专属客服支持</text>
              </view>
              <view class="py-[10rpx] pl-[30rpx] relative">
                <text class="text-blue-600 absolute left-0 top-[10rpx]">✓</text>
                <text>更高任务承接量</text>
              </view>
            </view>
            <nut-button 
              type="primary" 
              size="large"
              class="w-full text-[28rpx] font-semibold"
              @click="handleUpgrade"
            >
              升级SVIP
            </nut-button>
          </view>
        </view>
        
        <text class="text-[24rpx] text-gray-600 mt-[20rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
          <IconFont name="info-circle" class="mr-[8rpx]" />
          SVIP会员优惠：在校高校生40元/年，退役军人40元/年，社会人群80元/年
        </text>
      </view>

      <!-- 账户充值卡片 -->
      <view class="bg-white rounded-[20rpx] p-[35rpx] shadow-lg mb-[35rpx] border border-gray-100">
        <view class="flex items-center mb-[30rpx] pb-[20rpx] border-b-2 border-blue-50">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-[28rpx] mr-[20rpx]">
            <IconFont name="wallet" />
          </view>
          <text class="text-[36rpx] font-semibold text-blue-600">账户充值</text>
        </view>
        
        <view class="mb-[30rpx]">
          <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]">
            充值金额 <text class="text-red-500">*</text>
          </text>
          <view class="flex gap-[30rpx]">
            <view class="flex-1">
              <nut-picker
                v-model="formData.rechargeAmount"
                :columns="rechargeOptions"
                title="选择充值金额"
              >
                <view class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50">
                  {{ formData.rechargeAmount || '选择充值金额' }}
                </view>
              </nut-picker>
            </view>
            <view class="flex-1">
              <input 
                v-model="formData.customAmount"
                type="text" 
                placeholder="或输入自定义金额"
                class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50"
              />
            </view>
          </view>
        </view>
        
        <text class="text-[24rpx] text-gray-600 mb-[30rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
          充值资金可用于：实名认证费、发布任务信息费、升级会员等
        </text>
        
        <nut-button 
          type="primary" 
          size="large"
          class="w-full text-[32rpx] font-semibold"
          @click="handleRecharge"
        >
          立即充值
        </nut-button>
      </view>

      <!-- 任务发布卡片 -->
      <view class="bg-white rounded-[20rpx] p-[35rpx] shadow-lg mb-[35rpx] border border-gray-100">
        <view class="flex items-center mb-[30rpx] pb-[20rpx] border-b-2 border-blue-50">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-[28rpx] mr-[20rpx]">
            <IconFont name="tasks" />
          </view>
          <text class="text-[36rpx] font-semibold text-blue-600">任务发布</text>
        </view>
        
        <text class="text-[24rpx] text-gray-600 mb-[30rpx] p-[15rpx] bg-gray-50 rounded-[12rpx] block">
          普通用户仅需短信认证即可发布任务（无需充值），申请成为从业者接任务需充值完成实名认证
        </text>
        
        <view class="flex gap-[25rpx] mb-[30rpx]">
          <view class="flex-1 border-2 border-gray-200 rounded-[20rpx] p-[25rpx] text-center">
            <text class="text-[32rpx] font-semibold mb-[15rpx] block">市级发布</text>
            <text class="text-[36rpx] font-bold mb-[20rpx] block">¥1.00</text>
            <text class="text-[24rpx] text-gray-600">任务在您所在市级区域展示</text>
          </view>
          
          <view class="flex-1 border-2 border-gray-200 rounded-[20rpx] p-[25rpx] text-center">
            <text class="text-[32rpx] font-semibold mb-[15rpx] block">省级发布</text>
            <text class="text-[36rpx] font-bold mb-[20rpx] block">¥5.00</text>
            <text class="text-[24rpx] text-gray-600">任务在全省范围内展示</text>
          </view>
          
          <view class="flex-1 border-2 border-gray-200 rounded-[20rpx] p-[25rpx] text-center">
            <text class="text-[32rpx] font-semibold mb-[15rpx] block">全国发布</text>
            <text class="text-[36rpx] font-bold mb-[20rpx] block">¥8.00</text>
            <text class="text-[24rpx] text-gray-600">任务在全国范围内展示</text>
          </view>
        </view>
        
        <nut-button 
          type="primary" 
          size="large"
          class="w-full text-[32rpx] font-semibold"
          @click="handlePublishTask"
        >
          发布新任务
        </nut-button>
      </view>
    </view>

    <!-- Footer -->
    <view class="text-center p-[40rpx] text-blue-600 text-[24rpx]">
      <text class="block">© 2023 平台服务 | 让您的价值得到更好实现</text>
      <view class="flex justify-center gap-[30rpx] mt-[20rpx]">
        <text class="text-blue-500">平台规则</text>
        <text class="text-blue-500">常见问题</text>
        <text class="text-blue-500">联系客服</text>
        <text class="text-blue-500">隐私政策</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Taro from '@tarojs/taro'

// 表单数据
const formData = reactive({
  tradePassword: '',
  confirmPassword: '',
  rechargeAmount: '',
  customAmount: ''
})

// 充值选项
const rechargeOptions = ref([
  { text: '¥5', value: '5' },
  { text: '¥20', value: '20' },
  { text: '¥50', value: '50' },
  { text: '¥100', value: '100' },
  { text: '自定义金额 (¥50以上)', value: 'custom' }
])

// 实名认证
const handleAuth = () => {
  Taro.showToast({
    title: '认证成功！您可以使用全部平台功能',
    icon: 'success'
  })
}

// 升级会员
const handleUpgrade = () => {
  Taro.showToast({
    title: '您已成功升级为SVIP会员！会员有效期至2024年12月31日',
    icon: 'success'
  })
}

// 充值
const handleRecharge = () => {
  if (!formData.rechargeAmount && !formData.customAmount) {
    Taro.showToast({
      title: '请选择充值金额',
      icon: 'none'
    })
    return
  }
  
  Taro.showToast({
    title: '充值成功！',
    icon: 'success'
  })
}

// 发布任务
const handlePublishTask = () => {
  Taro.showToast({
    title: '正在跳转到任务发布页面',
    icon: 'none'
  })
}
</script>